import classNames from 'classnames'
import { useEffect, useRef } from 'react'
import styles from './index.module.scss'

function Input({ extraName, extraClick, className, ...rest }) {
    const inputRef = useRef(null)
    useEffect(() => {
        console.log(inputRef);
    }, [])

    return (
        <div className={classNames(styles.root, className)}>
            {/* 左侧：input 标签 */}
            <input
                className="input"
                {...rest}
                ref={inputRef}
            />

            {/* 右侧：额外内容 */}
            <div className="extra" onClick={extraClick}>{extraName}</div>
        </div>
    )
}

export default Input